<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    @keyframes moveballon {
        0%{right: 0%}
        10%{right: 20%;transform: rotate(45deg)}
        20%{right: 40%;transform: rotate(75deg)}
        30%{right: 60%;transform: rotate(80deg)}
        40%{right: 80%;transform: rotate(75deg)}
        50%{right: 120%;transform: rotate(45deg)}
        60%{right: 80%;transform: rotate(0deg)}
        70%{right: 60%;transform: rotate(45deg)}
        80%{right: 40%;transform: rotate(75deg)}
        90%{right: 20%;transform: rotate(80deg)}
        100%{right: 0%;transform: rotate(0deg)}
    }
    @keyframes bgcolor {
        0%{
            background-color: pink;
        }
        33%{
            background-color: black;
        }
        66%{
            background-color: yellow;
        }
        100%{
            background-color: blue;
        }
    }
    .divall{
        border: 1px solid black;
        height: 600px;
        position: relative;
        background-color: #DDF5F7;
        animation: bgcolor 10s linear infinite;
    }
    .ceng1{
        /*border: 1px solid red;*/
        height: 301px;
        width: 100%;
        background-image: url("img/groundFront.png");
        background-position: 250px;
        position: absolute;
        bottom: 0px;
        z-index: 10;
    }
    .ceng2{
        /*border: 1px solid red;*/
        height: 299px;
        width: 100%;
        background-image: url("img/groundMid.png");
        background-position: 100px;
        position: absolute;
        bottom: 0px;
        z-index: 7;
    }
    .ceng3{
        /*border: 1px solid red;*/
        height: 280px;
        width: 100%;
        background-image: url("img/groundBack.png");
        background-position: 0px;
        position: absolute;
        bottom: 0px;
        z-index: 5;
    }
    .ceng4{
        /*border: 1px solid red;*/
        height: 145px;
        width: 100%;
        background-image: url("img/skyline.png");
        background-position: 0px;
        position: absolute;
        bottom: 150px;
        z-index: 4;
    }
    .ceng5{
        /*border: 1px solid red;*/
        height: 200px;
        width: 100%;
        background-image: url("img/beans.png");
        background-repeat: no-repeat;
        background-position: 0px;
        position: absolute;
        left: 50%;
        bottom: 180px;
        z-index: 3;
    }
    .ceng6{
        /*border: 1px solid red;*/
        height: 200px;
        width: 100%;
        background-image: url("img/Planetarium.png");
        background-repeat: no-repeat;
        background-position: 0px;
        position: absolute;
        left: 55%;
        bottom: 120px;
        z-index: 6;
    }
    .ceng7{
        /*border: 1px solid red;*/
        height: 200px;
        width: 100%;
        background-image: url("img/Glockenspiel.png");
        background-repeat: no-repeat;
        background-position: 0px;
        position: absolute;
        left: 38%;
        bottom: 180px;
        z-index: 6;
    }
    .ceng8{
        /*border: 1px solid red;*/
        height: 200px;
        width: 100%;
        background-image: url("img/dowEventCenter.png");
        background-repeat: no-repeat;
        background-position: 0px;
        position: absolute;
        left: 10%;
        bottom: 120px;
        z-index: 6;
    }
    .ceng9{
        /*border: 1px solid red;*/
        height: 370px;
        width: 100%;
        background-image: url("img/friendshipShell.png");
        background-repeat: no-repeat;
        background-position: 0px;
        position: absolute;
        left: 20%;
        bottom: 80px;
        z-index: 9;
    }
    .ceng10{
        /*border: 1px solid red;*/
        height: 370px;
        width: 157px;
        background-image: url("img/balloon.png");
        background-repeat: no-repeat;
        position: absolute;
        right: -165px;
        z-index: 1;
        animation: moveballon 20s linear infinite;
    }
</style>
<body>
<div class="divall">
    <div class="ceng1">

    </div>
    <div class="ceng2">

    </div>
    <div class="ceng3">

    </div>
    <div class="ceng4">

    </div>
    <div class="ceng5">

    </div>
    <div class="ceng6">

    </div>
    <div class="ceng7">

    </div>
    <div class="ceng8">

    </div>
    <div class="ceng9">

    </div>
    <div class="ceng10">

    </div>
</div>
</body>
</html>